<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="margin-30-0 flex-center">
			<!-- <u-icon name="arrow-left" color="#333333" size="20"></u-icon> -->
			<view class="fontSize-18 color-000 flex1 text-center">商城</view>
			<!-- <view style="width: 40rpx;"></view> -->
		</view>
		<!-- <u-search placeholder="日照香炉生紫烟" bgColor="#ffffff" v-model="keyword"></u-search> -->
		<!-- 点餐 -->
		<view class="ordering-meals-view">
			<template  v-if="orderNemuList.length == 0">
				<view style="display: flex;
				align-items: center;justify-content: center;margin-top: 100rpx;width: 100%;padding-bottom: 50rpx;">
					<u-empty
					        mode="list"
					        icon="http://cdn.uviewui.com/uview/empty/list.png"
							width="150px"
							height="150px"
							text="列表为空"
							textSize="18"
					>
					</u-empty>
				</view>
			</template>
			<template v-else>
				<scroll-view scroll-y class="ordering-meals-left">
					<view class="ordering-meals-item" :class="orderItemIndex == orderIndex?'active-orderingItem':''" v-for="(orderItem,orderIndex) in orderNemuList"
						:key="orderIndex" @click="chooseItem(orderItem,orderIndex)">
						<view class="ordering-meals-itemIcon" v-if="orderItemIndex == orderIndex"></view>
						{{orderItem.name}}
					</view>
					<view style="height: 100rpx;"></view>
				</scroll-view>
				<scroll-view scroll-y class="ordering-meals-right">
					<!-- <view class="ordering-meals-rightTitle">热销</view> -->
					<view class="ordering-meals-rightItem" v-for="(item,index) in orderList" :key="index"
					@click.stop="$tools.navigateTo('/pages/shop/shop-goods-info?goods_id='+item.id)">
						<image :src="item.image" class="ordering-meals-rightImage"></image>
						<view>
							<view class="meals-rightItemTitle">{{item.title}}</view>
							<!-- <view class="meals-rightItemDesc">{{item.desc}}</view> -->
							<view class="meals-rightItemPrice">
								<view class="meals-rightItemPrice1"><text
										style="font-size: 28rpx;font-weight: 400 !important;">￥</text>{{item.price}}</view>
								<view class="meals-rightItemSpeces">购买</view>
							</view>
						</view>
					</view>
					<template v-if="orderList.length==0">
						<u-empty
						        mode="car"
						        icon="http://cdn.uviewui.com/uview/empty/car.png"
								width="150px"
								height="150px"
								text="暂无商品"
								textSize="18"
						>
						</u-empty>
					</template>
					<view style="height: 100rpx;"></view>
					<view style="padding-bottom: 100rpx;">
						<u-loadmore v-if="loading" status="loading" />
						<u-loadmore v-if="isLastPage" status="nomore" />
					</view>
				</scroll-view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 一级分类选择
				classIndex:0,
				// 一级分类
				list: [],
				// 一级分类Id
				listId:'',
				// 菜单列表
				orderNemuList:[],
				// 二级分类id
				orderNemuId:'',
				orderItemIndex: 0,
				// 商品列表
				orderList: [],
				page: 1,
				limit: 10,
				isLastPage: false,
				loading: false,
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.orderList = []
			this.classIndex = 0
			this.orderItemIndex = 0
			// this.classifiedGoods()
			this.categoryReclassify()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.orderList = []
			this.classifiedGoods().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.orderList.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.classifiedGoods();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 二级分类
			async categoryReclassify(){
				let res = await this.$http.post(this.$api.cate_list,{
					page:1,
					limit:100,
					type:1
				},{token:true})
				this.orderNemuList = res.data
				this.orderNemuId = res.data[0].id
				this.classifiedGoods()
			},
			// 三级分类
			async classifiedGoods(){
				let res = await this.$http.post(this.$api.goods_list,
				{page:this.page, limit:this.limit,goods_type:1, cate_id:this.orderNemuId},
				{token:true})
				this.orderList = [...this.orderList, ...res.data]
			},
			// 二级分类选择
			chooseItem(item,i) {
				this.page = 1
				this.isLastPage = false
				this.orderList = []
				this.orderNemuId = item.id
				this.orderItemIndex = i
				this.classifiedGoods(this.orderNemuId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 点餐右侧
	.ordering-meals-right {
		width: 70%;
		background-color: #ffffff;
		height: 1300rpx;
		// padding-bottom: 150rpx;
	}
	
	.ordering-meals-rightTitle {
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		padding-left: 30rpx;
	}
	
	.ordering-meals-rightItem {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}
	
	.ordering-meals-rightImage {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
	
	.meals-rightItemTitle {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		width: 310rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20rpx;
	}
	
	.meals-rightItemDesc {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		width: 310rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20rpx;
	}
	
	.meals-rightItemPrice {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.meals-rightItemPrice1 {
		font-weight: bold;
		font-size: 32rpx;
		color: #FE3232;
	}
	
	.meals-rightItemSpeces {
		background: #967C5E;
		border-radius: 19rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 20rpx;
	}
	
	// 点餐左侧
	.ordering-meals-left {
		width: 30%;
		background-color: #F7F7F7;
		height: 1300rpx;
		// padding-bottom: 150rpx;
	}
	
	.active-orderingItem {
		background-color: #ffffff !important;
		font-weight: 400;
		font-size: 30rpx;
		color: #967C5E !important;
		position: relative;
	}
	
	.ordering-meals-itemIcon {
		position: absolute;
		top: 35rpx;
		left: 0;
		width: 6rpx;
		height: 40rpx;
		background-color: #967C5E;
		border-radius: 4rpx;
	}
	
	.ordering-meals-item {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #4D4D4D;
		padding: 35rpx;
	}
	
	// 点餐
	.ordering-meals-view {
		// margin-top: 35rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.scroll-list-view {
		width: 750rpx;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		// background-color: #ffffff;
	}
	
	.scroll-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		margin-top: 10rpx;
	}
	
	.scroll-view {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 24%;
		margin-right: 1%;
	}
	.scroll-active{
		color: #1684FC !important;
	}
	.scroll-image-active{
		border: 1px solid #1684FC;
		border-radius: 10rpx;
	}
	.scroll-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 5rpx;
		flex-shrink: 0;
		overflow: hidden;
	}
	.search-view {
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 20rpx 30rpx;
		background-color: #ffffff;
	}
	
	.search-view1 {
		display: flex;
		align-items: center;
		background-color: #F7F7F7;
		width: 100%;
		height: 80rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
	}
	
	.search-text {
		font-size: 28rpx;
		height: #666666;
		margin: -8rpx 0 0 10rpx;
	}
	.phone-view{
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #F0F0F0;
		flex-shrink: 0;
	}
	.header-bg-image {
		width: 100%;
		min-height: 100vh;
	}
</style>